import "./index.model.tab.css"
interface Props {
    selectedFilter: string;
    setselectFilters: (filterName: string) => void;
    filterCounts: { // 新增类型定义
        [key: string]: number;
    };
}
export default function TabszaiTu({ selectedFilter, setselectFilters, filterCounts }: Props) {

    //tabs切换s数据


    const handleFilterClick = (filterName: string) => {
        setselectFilters(filterName);
    };

    const filters = [
        { name: '全部', count: filterCounts["全部"] },
        { name: '待发车', count: filterCounts["待发车"] },
        { name: '运输中', count: filterCounts["运输中"] },
        { name: '已抵达', count: filterCounts["已抵达"] },
        { name: '已收货', count: filterCounts["已收货"] },
    ];
    return (
        <div>
            {/* tabs切换 */}
            <div className="filter-container">
                {filters.map((filter, index) => (
                    <div key={index} className={`filter-item ${selectedFilter === filter.name ? 'active' : ''}`} onClick={() => handleFilterClick(filter.name)} >
                        <span className="filter-name">{filter.name}</span>
                        <span className='filter-count'>({filter.count})</span>
                    </div>
                ))}
            </div>
        </div>
    )
}
